<script setup>
import { ref, onMounted } from 'vue'

</script>

<template>
  <div class="py-5 bg-white px-5 shadow-md">
    <div class="flex items-center text-2xl text-gray-500 font-medium pb-10 py-5">
      <div class="ml-10">
        <el-skeleton
          animated
          :loading="loading"
        >
          <template #template>
            <div class="w-32">
              <el-skeleton-item
                variant="h1"
                style="height: 3rem;"
              />
            </div>
          </template>
          <template #default>
            已归档{{ total }}篇
          </template>
        </el-skeleton>

      </div>
    </div>
    <el-timeline>
      <el-skeleton
        animated
        :loading="loading"
      >
        <template #template>
          <el-timeline-item
            placement="top"
            color="#e7e9ec"
            v-for="item in 10"
          >
            <el-skeleton-item
              variant="h1"
              style="height: 4rem;"
            />
          </el-timeline-item>

        </template>
        <template #default>
          <el-timeline-item
            type="success"
            :timestamp="item.createTime"
            placement="top"
            color="#808080"
            v-for="item in list"
            :key="item.articleId"
          >
            <RouterLink :to="{ path: '/detail/' + item.articleId }">
              <el-card>
                <div
                  class="flex items-center justify-between border-b border-gray-300 border-dashed hover:border-b hover:border-gray-600 duration-150 cursor-pointer  py-1"
                >
                  <div class="px-1">文章标题{{ item.title }}
                  </div>
                  <div class="px-3">{{ item.count }}字
                  </div>
                </div>

              </el-card>
            </RouterLink>
          </el-timeline-item>
        </template>
      </el-skeleton>

    </el-timeline>
  </div>


</template>

<style
  scoped
  lang='scss'
></style>